/**
 * Link 与 NavLink 的 to 属性
 *
 * 1. string 方式
 *    <Route to="/abcd" />
 *
 * 2. object 方式
 *    <Route to={{
 *      pathname: '/abcd',
 *      search: 'a=1&b=2'
 *      hash: 'flag',
 *      state: ''
 *    }} />
 *
 *    与 VueRouter 不同的是，
 *      1. 路径不是 path 而是 pathname
 *      2. ?号传参，不是 query 而是 search。且 search 是字符串形式
 *      3. state, 可以是 任意类型，在 location.state 可以获取到该参数
 *      4. 没有 params 字段，如果需要传递 params 参数，需要自己拼接到 pathname 后面
 *      5. 也没有 name 字段。
 *
 * 3. func 方式
 *    <Route to={(location) => object 方式} />
 *    <Route to={(location) => string 方式} />
 *
 *    1. 函数会收到一个 location 的参数，该参数表示当前的路由信息
 *
 * Link 与 NavLink 的 replace 属性：
 *    作用：用于控制当前导航是否已重定向模式来导航
 *
 * NavLink 的 exact 属性：
 *    作用：控制当前组件是否已精准模式来高亮
 *
 *    to 属性的值 与 location.pathname 是否完全一致，完全一致才会高亮
 *
 * NavLinke 的 strict 属性：
 *    作用：控制当前组件是否已严格模式来高亮，主要看最后有没有多余的斜杠
 */

import { Component } from "react";
import { Route, NavLink, Switch, Redirect } from "react-router-dom";

import Home from "./views/Home";
import About from "./views/About";
import One from "./views/One";

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <div className="container">
          <div className="left">
            <NavLink
              to={{
                pathname: "/home",
                search: "?a=1&b=2",
                hash: "flag",
                state: "abcd",
              }}
              activeClassName="abcd"
              replace
            >
              go Home
            </NavLink>
            <br />
            <NavLink
              to={{
                pathname: "/about/100",
              }}
              activeClassName="abcd"
            >
              go About
            </NavLink>
            <br />
            <NavLink
              to={(location) => {
                console.log("location", location);
                // return "/home?redirect=" + location.pathname;

                return {
                  pathname: "/home",
                  search: "redirect=" + location.pathname,
                };
              }}
            >
              go 未知
            </NavLink>

            <br />

            <NavLink to="/one/two">go /one/two</NavLink>
            <br />
            <NavLink to="/one/two" exact>
              go /one/two exact
            </NavLink>
            <br />
            <NavLink to="/one/" strict>
              go /one/two exact
            </NavLink>
          </div>
          <div className="right">
            <Switch>
              <Route path="/home" component={Home} />
              <Route path="/about/:id" component={About} />
              <Route path="/one" component={One} />
              <Redirect from="/abcd" to="/home" />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
